<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j"
    template="/layout/template.xhtml">

<ui:define name="body">

	<h:form id="chooseCityForm">
		<rich:panel>
			<f:facet name="header">Choose a city (From)</f:facet>   
			<h:panelGrid>
			
				<s:decorate id="fromCountryComboId" template="/layout/edit.xhtml">
				<ui:define name="label">Travel from country</ui:define>
	    		<h:selectOneMenu value="#{travelCreationData.fromCountry}" id="fromCountryComboId" >
	    			<s:selectItems value="#{travelCreationData.fromCountries}" var="fromCountries" label="#{fromCountries.name}" itemValue="#{fromCountries.idCountry}"  noSelectionLabel="Select a country"/>
	    			<a:support event="onchange" actionListener="#{createTravelBean.updateFromComboListener}" bypassUpdates="false" ajaxSingle="true" reRender="fromStateComboId,fromCityComboId"/>
	    		</h:selectOneMenu>
	 			</s:decorate>	
	 			<s:decorate id="fromStateComboId" template="/layout/edit.xhtml">
	 			<ui:define name="label">Travel from state</ui:define>
	 			<h:selectOneMenu value="#{travelCreationData.fromState}" id="fromStateComboId">
	    			<s:selectItems value="#{travelCreationData.fromStates}" var="fromStates" label="#{fromStates.name}" itemValue="#{fromStates.idState}" noSelectionLabel="Select a state"/>
	    			<a:support event="onchange" actionListener="#{createTravelBean.updateFromComboListener}" bypassUpdates="false" ajaxSingle="true" reRender="fromCityComboId"/>
	    		</h:selectOneMenu>
	    		</s:decorate>
	    		<s:decorate id="fromCityComboId" template="/layout/edit.xhtml">
	    		<ui:define name="label">Travel from city</ui:define>
	    		<h:selectOneMenu value="#{travelCreationData.fromCity}" id="fromCityComboId" required="true">
	    			<s:selectItems value="#{travelCreationData.fromCities}" var="fromCities" label="#{fromCities.name}" itemValue="#{fromCities.idCity}" noSelectionLabel="Select a city"/>
	    		</h:selectOneMenu>
	    		</s:decorate>
    		
			</h:panelGrid>
		</rich:panel>
		
		<rich:panel>
			<f:facet name="header">Choose a city (To)</f:facet>   
			<h:panelGrid>
				<s:decorate id="toCountryComboId" template="/layout/edit.xhtml">
				<ui:define name="label">Travel to country</ui:define>
	    		<h:selectOneMenu value="#{travelCreationData.toCountry}" id="toCountryComboId" >
	    			<s:selectItems value="#{travelCreationData.toCountries}" var="toCountries" label="#{toCountries.name}" itemValue="#{toCountries.idCountry}"  noSelectionLabel="Select a country"/>
	    			<a:support event="onchange" actionListener="#{createTravelBean.updateToComboListener}" bypassUpdates="false" ajaxSingle="true" reRender="toStateComboId,toCityComboId"/>
	    		</h:selectOneMenu>
	 			</s:decorate>
	 			<s:decorate id="toStateComboId" template="/layout/edit.xhtml">	
	 			<ui:define name="label">Travel to state</ui:define>
	 			<h:selectOneMenu value="#{travelCreationData.toState}" id="toStateComboId">
	    			<s:selectItems value="#{travelCreationData.toStates}" var="toStates" label="#{toStates.name}" itemValue="#{toStates.idState}" noSelectionLabel="Select a state"/>
	    			<a:support event="onchange" actionListener="#{createTravelBean.updateToComboListener}" bypassUpdates="false" ajaxSingle="true" reRender="toCityComboId"/>
	    		</h:selectOneMenu>
	    		</s:decorate>
	    		<s:decorate id="toCityComboId" template="/layout/edit.xhtml">
	    		<ui:define name="label">Travel to city</ui:define>
	    		<h:selectOneMenu value="#{travelCreationData.toCity}" id="toCityComboId" required="true">
	    			<s:selectItems value="#{travelCreationData.toCities}" var="toCities" label="#{toCities.name}" itemValue="#{toCities.idCity}" noSelectionLabel="Select a city"/>
	    		</h:selectOneMenu>			
			 	</s:decorate>
			</h:panelGrid>
			
			

			
		</rich:panel>

    	<div class="actionButtons">

            <h:commandButton id="continue"
                          value="Continue"
                         action="#{createTravelBean.chooseCitiesAction}"/>
        </div>    
       
		
	</h:form>
        
        
</ui:define>
</ui:composition>
